@import "../common/index";
.self{
  .banner {
    position: relative;
    padding-top: 8rem;
    width: 100%;
    height: 70vh;
    background: url("../../assets/self/banner.png") no-repeat top;
    background-size: cover;

    .bannerHeader {
      color: @allWhite;

      .t1 {
        font-size: 56px;
        font-weight: bold;
        margin-bottom: 1rem;
      }
      .t2{
        font-size: 24px;
      }
    }
  }

  .h1 {
    margin: 7rem 0 3rem;
    text-align: center;
  }
  .overview{
    display: flex;
    .overviewBox{
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 5rem 2rem;
      margin-right: 1rem;
      background: #F3FAFD;
      span{
        margin-top: 1rem;
        text-align: center;
        font-size: 18px;
      }
      &.overviewBox2{
        flex: 3;
        margin-right: 0;
        justify-content: normal;
        align-items: normal;
        background: url("../../assets/self/overviewBox.png") no-repeat top;
        background-size: cover;
        .overviewInfo{
          width: 60%;
          color: #666666;
          font-size: 18px;
        }
      }
    }
  }
  .advantage{
    .advantageBox{
      display: flex;
      margin-bottom: 1rem;
      &:last-child{
        margin-bottom: 0;
      }
      .advantageContent{
        flex: 1;
        display: flex;
        align-items: center;
        margin-right: 1rem;
        padding: 1.2rem 2rem;
        border-radius: 4px;
        border: 1px solid #EBF0FD;
        background: linear-gradient(0deg, #F5F8FF, #FFFFFF);
        &:last-child{
          margin-right: 0;
        }
        .advantageInfo{
          margin-left: 52px;
          .advantageC1{
            font-size: 20px;
          }
          .advantageC2{
            margin-top: 1rem;
            color: #757A99;
          }
        }
      }
    }
  }
  .introduce{
    display: flex;
    .introduceBox{
      flex: 1;
      padding: 1.5rem 1.5rem 3rem;
      margin-right: 2rem;
      background: url("../../assets/self/introduce.png") no-repeat top;
      background-size: cover;
      &:last-child{
        margin-right: 0;
      }
      .introduceTitle{
        display: flex;
        align-items: center;
        span{
          font-size: 24px;
          font-weight: 500;
          margin-left: .5rem;
        }
      }
      .introduceInfo{
        margin-top: 36px;
        padding-right: 2rem;
        .introduceItem{
          display: flex;
          align-items: baseline;
          margin-bottom: 22px;
          font-size: 18px;
          font-weight: 400;
          color: #666;
          &:before{
            content: "";
            flex: 0 0 7px;
            height: 7px;
            border-radius: 50%;
            margin-right: .5rem;
            background: #9FBCF3;
          }
        }
      }
    }
  }
  .expense{
    padding-top: 3rem;
    padding-bottom: 3rem;
    background: url("../../assets/self/expense.png") no-repeat top;
    background-size: cover;
    .h1{
      margin-top: 0;
    }

    table {
      border-collapse: collapse;
      border: none;
      font-size: 18px;
    }
    .table{
      width: 100%;
      tr{
        border: none;
      }
      td{
        padding: 36px 16px;
        text-align: center;
        border-right: 1px solid #E6E8F0;
        border-bottom: 1px solid #E6E8F0;
        background: @allWhite;
      }
      .tableHeader{
        th{
          padding: 36px 16px;
          background: #558CF6;
          border: none;
          color: @allWhite;
        }
      }
      .bold{
        font-weight: 500;
      }
    }
  }
}
